<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Gomokult</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
		<style>
			html {
				user-select: none;
				height: 100%;
				background-color: #222;
			}
			body {
				margin: 0px;
				height: 100%;
			}

			.background-wrapper {
				position: fixed;
				z-index: -1;
				top: -1000px;
				left: -300px;
				opacity: 0;
				animation: background-reveal 1s linear forwards;
			}
			@keyframes background-reveal {
				0% { opacity: 0; }
				100% { opacity: 0.15; }
			}
			.background-pattern {
				font-size: 50px;
				white-space: nowrap;
				line-height: 115px;
				filter: drop-shadow(black 0px 0px 4px);
				transform-origin: center center;
				animation: background-rotate 120s infinite linear;
			}
			@keyframes background-rotate {
				0% { transform: rotate(0); }
				100% { transform: rotate(360deg); }
			}

			div.header-menu {
				display: flex;
				justify-content: right;
				align-items: center;
				width: 100%;
				height: 100px;
				background: linear-gradient(#000B, #0000);
				position: fixed;
				top: 0px;
				z-index: 1;
			}
			.header-menu-item {
				filter: drop-shadow(#FFFA 0px 0px 7px);
				margin: -20px 30px 0px 10px;
				color: #FFF8;
				font-size: 25px;
				font-family: "Segoe MDL2 Assets";
				text-decoration: none;
				cursor: pointer;
			}
			div.cascade-menu {
				width: 100px;
				height: 100px;
				background-color: black;
				position: absolute;

			}

			.main-menu {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.main-title {
				font-size: 100px;
				font-weight: bold;
				font-family: "Century Gothic";
			}
			.white-title {
				color: white;
				filter: drop-shadow(white 0px 0px 10px);
			}
			.blue-title {
				color: #9CF;
				filter: drop-shadow(#9CF 0px 0px 10px);
			}
			.red-title {
				color: #F99;
				filter: drop-shadow(#F99 0px 0px 10px);
			}
			.main-menu-item {
				cursor: pointer;
				margin: 5px 0px;
				color: #EEE;
				font-weight: bold;
				font-size: 30px;
				text-decoration: none;
				filter: drop-shadow(#FFFA 0px 0px 7px);
			}
			.main-menu-item-pressed { animation: main-menu-item-press 0.25s ease-in-out; }
			@keyframes main-menu-item-press {
				33% { transform: scale(0.8, 0.8); }
				66% { transform: scale(1.1, 1.1); }
				100% { transform: scale(1, 1); }
			}

			.main-menu-item-head {
				transition: transform 0.07s linear;
				transform: translate(-50px, 0px) scale(0, 1);
			}
			.main-menu-item:hover .main-menu-item-head { transform: translate(0px, 0px) scale(1, 1); }
			.main-menu-item-tail { transition: transform 0.07s linear; }
			.main-menu-item:hover .main-menu-item-tail { transform: translate(50px, 0px) scale(0, 1); }

			.popup-panel {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #0008;
				backdrop-filter: blur(20px);
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				z-index: 3;
				visibility: hidden;
			}
			.popup-panel-showing { animation: popup-panel-reveal 0.1s linear forwards; }
			@keyframes popup-panel-reveal {
				0% {
					opacity: 0;
					visibility: visible;
				}
				100% {
					opacity: 1;
					visibility: visible;
				}
			}
			.popup-panel-hiding { animation: popup-panel-hide 0.1s linear forwards; }
			@keyframes popup-panel-hide {
				0% {
					visibility: visible;
					opacity: 1;
				}
				99% {
					visibility: visible;
					opacity: 0;
				}
				100% {
					visibility: hidden;
					opacity: 0;
				}
			}
			.login-panel {
				display: flex;
				background: #FFF2;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				position: fixed;
				width: 330px;
				height: 330px;
				backdrop-filter: blur(8px);
				background: linear-gradient(45deg, #FFF2, #FFF1);
				filter: drop-shadow(#FFF2 0px 0px 10px);
				border: 1px solid #FFF2;
				border-radius: 10px;
			}
			.login-panel-button {
				color: #FFF4;
				cursor: pointer;
			}
			.login-panel-button:hover { color: #FFF7; }
			.login-panel-title {
				font-weight: lighter;
				font-size: 24px;
				color: #EEE;
				filter: drop-shadow(#FFF8 0px 0px 10px);
			}
			.text-input {
				font-size: 16px;
				text-align: justify;
				font-weight: lighter;
				font-family: inherit;
				resize: none;
				padding: 10px;
				color: #FFF8;
				max-lines: 14;
				background: #1115;
				outline: none;
				border: 1px solid #AAA4;
				box-shadow: inset #0001 0 0 40px;
				border-radius: 10px;
				height: 20px;
				width: 200px;
			}
			.hidden-text-input { animation: text-input-shrink 0.1s ease-out forwards; }
			@keyframes text-input-shrink {
				0% {
					height: 20px;
					transform: scale(1, 1);
					margin: 0px 0px;
				}
				100% {
					height: 0px;
					transform: scale(1, 0);
					margin: -25px 0px;
				}
			}
			.visible-text-input { animation: text-input-expand 0.1s ease-in forwards; }
			@keyframes text-input-expand {
				0% {
					height: 0px;
					transform: scale(1, 0);
					margin: -25px 0px;
				}
				100% {
					height: 20px;
					transform: scale(1, 1);
					margin: 0px 0px;
				}
			}

			.popup-button {
				background-color: transparent;
				background: linear-gradient(135deg, #FFF1, #FFF3);
				color: #FFFA;
				outline: none;
				border: 1px solid #FFF2;
				border-radius: 8px;
				margin-bottom: 10px;
				width: 98px;
				height: 35px;
			}
			.popup-button:hover { background: linear-gradient(135deg, #FFF2, #FFF4); }
			.popup-button:active { background: linear-gradient(135deg, #FFF1, #FFF2); }
			
			.login-options {
				color: #888;
				display: flex;
				width: 223px;
				justify-content: space-between;
			}

			.popup-checkbox {
				background-color: #222;
				border: #8885 1px solid;
				border-radius: 4px;
				margin-right: 5px;
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
			}
			.popup-checkbox:hover { filter: brightness(1.4); }
			.popup-checkbox-checked { background-color: #59D; }
			.popup-checkbox-checked::after {
				content: "√";
				color: #FFF;
				font-family: serif;
				font-weight: bold;
				font-size: 20px;
				margin-left: -1.5px;
				margin-top: 2px;
			}
			.clickable-text:hover { color: #BBB; }
		</style>
	</head>
	<body>
		<div class="background-wrapper">
			<div class="background-pattern">
				<script>
					for (let i = 0; i < 29; ++i) {
						for (let j = 0; j < 11; ++j)
							document.write(i & 1 ? "⚫　⚪　" : "⚪　⚫　");
						document.write("<br/>");
					}
				</script>
			</div>
		</div>

		<div class="header-menu">
			<a class="header-menu-item" title="个人主页" id="UserButton"><i class='fa-solid fa-user fa-lg' style='color: white'></i></a>
			<a class="header-menu-item" title="复制分享链接" id="ShareButton"><i class='fa-solid fa-paper-plane fa-lg' style='color: white'></i></a>
			<a class="header-menu-item" title="退出登录" id="LogoutButton"><i class='fa-solid fa-right-from-bracket fa-lg' style='color: white'></i></a>
		</div>

		<div class="main-menu">
			<div class="main-title"><span class="white-title">G</span><span class="blue-title">o</span><span class="white-title">m</span><span class="red-title">o</span><span class="white-title">Kult</span></div>
			<a id="MatchingButton" class="main-menu-item">
				<div class='main-menu-item-head fa-solid fa-caret-right fa-lg' style='color:white'></div>
				匹配对局
				<div class='main-menu-item-tail fa-solid fa-caret-right fa-lg' style='color:white'></div>
			</a>
			<a id="GalleryButton" class="main-menu-item">
				<div class='main-menu-item-head fa-solid fa-caret-right fa-lg' style='color:white'></div>
				对局展厅
				<div class='main-menu-item-tail fa-solid fa-caret-right fa-lg' style='color:white'></div>
			</a>
			<a id="SelfOnlyButton" class="main-menu-item">
				<div class='main-menu-item-head fa-solid fa-caret-right fa-lg' style='color:white'></div>
				我的对局
				<div class='main-menu-item-tail fa-solid fa-caret-right fa-lg' style='color:white'></div>
			</a>
		</div>

		<div class="popup-panel">
			<div class="login-panel">
				<div style="display: flex; margin: 30px 0px 15px 0px;">
					<div class="login-panel-title" style="font-size: 24px; font-weight: bold; margin: 0px 55px 0px 100px;">用户登陆</div>
					<div class="login-panel-button fa-solid fa-xmark fa-2x" id="CloseLoginPanelButton" style="visibility: inherit; margin: -10px 20px 0px 0px;"></div>
				</div>
				<input class="text-input title-editor" id="EmailBox" spellcheck="false" placeholder="输入邮箱"/>
				<input class="text-input title-editor hidden-text-input" id="NicknameBox" spellcheck="false" placeholder="输入用户名"/>
				<input class="text-input title-editor" id="PasswordBox" type="password" placeholder="输入密码"/>
				<div class="login-options">
					<div class="clickable-text" id="RegisterSwitch">用户注册</div>
					<div style="display: flex;"><div class="popup-checkbox" id="AutoLoginCheckBox" title="记住该账户14天"></div>自动登录</div>
				</div>
				<div class="login-panel-title" id="LoginErrorLabel" style="font-size: 13px; align-self: self-start; margin: -5px 60px; color: #FAA;">&ensp;</div>
				<input class="popup-button" id="LoginButton" type="button" value="登录"/>
			</div>
		</div>

		<script>
			ShareButton.onclick = () => {
				navigator.clipboard.writeText(this.location.href);
				let SelectedItem = $("#ShareButton");
				SelectedItem.addClass("main-menu-item-pressed");
				setTimeout(() => { SelectedItem.removeClass("main-menu-item-pressed"); }, 250);
			};

			UserButton.onclick = () => {
				if (sessionStorage.getItem("CurrentUser") === null) {
					$(".popup-panel").removeClass("popup-panel-hiding");
					$(".popup-panel").addClass("popup-panel-showing");
				}
				else
					window.location = `user_space.html?user_id=${sessionStorage.getItem("CurrentUser")}`;
			};
			CloseLoginPanelButton.onclick = () => {
				$(".popup-panel").removeClass("popup-panel-showing");
				$(".popup-panel").addClass("popup-panel-hiding");
				LoginErrorLabel.innerHTML = "&ensp;";
			};
			RegisterSwitch.onclick = () => {
				let SelectedItem = $("#NicknameBox");
				RegisterSwitch.innerHTML = SelectedItem.hasClass("hidden-text-input") ? "用户登录" : "用户注册";
				LoginButton.value = SelectedItem.hasClass("hidden-text-input") ? "注册登录" : "登录";
				SelectedItem.toggleClass("hidden-text-input");
				SelectedItem.toggleClass("visible-text-input");
			};
			AutoLoginCheckBox.onclick = () => { $("#AutoLoginCheckBox").toggleClass("popup-checkbox-checked"); };
			
			function TryUserLogin() {
				let Password = PasswordBox.value.replaceAll(/[=;]/g, "");
				$.post("/Gomokult_war_exploded/servlet/LoginVerifyServlet", {
					email: EmailBox.value,
					password: Password
				}, (feedback) => {
					let result = feedback.split("#");
					LoginErrorLabel.innerHTML = result[0];
					if (parseInt(result[1]) >= 0) {
						LoginErrorLabel.innerHTML = "&ensp;";
						sessionStorage.setItem("CurrentUser", parseInt(result[1]));
						sessionStorage.setItem("CurrentEmail", EmailBox.value);
						if ($("#AutoLoginCheckBox").hasClass("popup-checkbox-checked")) {
							let Now = new Date();
							Now.setHours(Now.getHours() + 24 * 14);
							document.cookie = `GomokultEmail="${EmailBox.value}"; expires=${Now.toUTCString()}`;
							document.cookie = `GomokultPassword="${PasswordBox.value}"; expires=${Now.toUTCString()}`;
						}
						CloseLoginPanelButton.onclick();
					}
				});
			}
			LoginButton.onclick = () => {
				if (!/\w+@\w+(\.\w+){1,2}/.test(EmailBox.value)) {
					LoginErrorLabel.innerHTML = "⚠ 邮箱格式不正确";
					return;
				}

				if (LoginButton.value == "注册登录") {
					if (NicknameBox.value.length < 4 || NicknameBox.value.length > 16) {
						LoginErrorLabel.innerHTML = "⚠ 请输入4-16位用户名";
						return;
					}
					if (PasswordBox.value.length < 4 || PasswordBox.value.length > 16) {
						LoginErrorLabel.innerHTML = "⚠ 请输入4-16位密码";
						return;
					}
					let Password = PasswordBox.value.replaceAll(/[=;]/g, "");

					$.post("/Gomokult_war_exploded/servlet/RegisterUserServlet", {
						email: EmailBox.value,
						nickname: NicknameBox.value,
						password: Password
					}, (message) => {
						LoginErrorLabel.innerHTML = message;
						if (/^\s*$/.test(message))
							TryUserLogin();
					});
				}
				else
					TryUserLogin();
			};

			LogoutButton.onclick = () => {
				let SelectedItem = $("#LogoutButton");
				SelectedItem.addClass("main-menu-item-pressed");
				setTimeout(() => { SelectedItem.removeClass("main-menu-item-pressed"); }, 250);
				document.cookie = `GomokultEmail=""; expires=${new Date().toUTCString()}`;
				document.cookie = `GomokultPassword=""; expires=${new Date().toUTCString()}`;
				sessionStorage.removeItem("CurrentUser");
				sessionStorage.removeItem("CurrentEmail");
			};

			MatchingButton.onclick = () => {
				if (sessionStorage.getItem("CurrentUser") === null)
					UserButton.onclick();
				else
					window.location = "matching.html";
			};
			GalleryButton.onclick = () => {
				if (sessionStorage.getItem("CurrentUser") === null)
					UserButton.onclick();
				else
					window.location = "games_gallery.html";
			};
			SelfOnlyButton.onclick = () => {
				if (sessionStorage.getItem("CurrentUser") === null)
					UserButton.onclick();
				else
					window.location = `games_gallery.html?self-only=1`;
			};

			(function TryLogin() {
				let Email = null, Password = null;
				for (let Token of document.cookie.split(";"))
					if (Token.includes("GomokultEmail="))
						Email = Token.split("=")[1].slice(1, -1);
					else if (Token.includes("GomokultPassword="))
						Password = Token.split("=")[1].slice(1, -1);
				if (Email != null && !Password != null) {
					$.post("/Gomokult_war_exploded/servlet/LoginVerifyServlet", {
						email: Email,
						password: Password
					}, (message) => {
						result = message.split("#");
						if (parseInt(result[1]) >= 0) {
							sessionStorage.setItem("CurrentUser", parseInt(result[1]));
							sessionStorage.setItem("CurrentEmail", Email);
						}
					});
				}
			})();
		</script>
	</body>
</html>
